<template>
  <div class="sales_filing_container">
    <div class="first_wrap">
      <span>编号</span>
      <el-input v-model="requestData.no" clearable></el-input>
      <span>名称</span>
      <el-input v-model="requestData.name" clearable></el-input>
    </div>
    <!-- 第二行按钮容器 -->
    <div class="second_wrap">
      <!-- <el-button
        icon="el-icon-search"
        type="primary"
        @click="handleQueryBtnClick"
        >查询</el-button
      > -->
      <el-button
        type="primary"
        icon="el-icon-folder-checked"
        @click="handleKeepBtnClick"
        >保存</el-button
      >
      <el-button icon="el-icon-delete" @click="handleDeleteBtnClick"
        >删除</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '30px' }"
        highlight-current-row
        @row-click="handleTableRowClick"
        height="72vh"
      >
        <el-table-column prop="no" label="编号" width="180"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 当前页面接口的引入
import {
  add_payment_api,
  query_payment_api,
  delete_payment_api
} from '@/request/store/store_baseInfo_request.js'
import { turnToString } from '@/util/util'
export default {
  data() {
    return {
      requestData: {
        no: '',
        name: ''
      },
      tableData: [],
      rowData: ''
    }
  },
  created() {
    this.handleQueryBtnClick()
  },
  methods: {
    // 点击保存按钮的时候，触发的函数
    async handleKeepBtnClick() {
      if (!this.requestData.no || !this.requestData.name) return
      const { data } = await add_payment_api(this.requestData)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.handleQueryBtnClick()
        this.emptyRequestData()
      }
    },
    // 查询按钮被点击的时候，触发的函数
    async handleQueryBtnClick(params) {
      const { data } = await query_payment_api(params)
      if (data && data.code === 200) {
        this.tableData = data.data
      }
    },
    // 表格行被点击的时候，拿到当前行的id
    handleTableRowClick(row) {
      this.rowData = row
    },
    // 点击删除的时候，触发的函数
    async handleDeleteBtnClick() {
      const rowData = turnToString(this.rowData)
      if (!rowData) return this.$message.error('请选择要删除的数据')
      const requestData = {
        id: this.rowData.id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await delete_payment_api(requestData)
          if (data && data.code === 200) {
            this.$message.success(data.msg)
            this.handleQueryBtnClick()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 清空
    emptyRequestData() {
      this.requestData.no = ''
      this.requestData.name = ''
    }
  }
}
</script>

<style lang="less" scoped>
.first_wrap {
  span {
    margin-right: 8px;
    // 让所有的span都有这个left边距
    &:nth-child(2n - 1) {
      margin-left: 16px;
    }
  }
  .span_left_16px {
    margin-left: 16px;
  }
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 160px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
    .el-input__icon {
      line-height: 35px;
    }
  }
}
.second_wrap {
  margin-top: 16px;
}
.table_container {
  margin-top: 16px;
  height: 72vh;
}
</style>
